<!-- 
    需要传入的props： hotelCategory 取值：starHotel 或 nonStarHotel
 -->

<template>
    <el-card class="card" @click="dialog = true" shadow="hover">
        <img src="../../../assets/image/addIcon/add.png" class="image" />
        <div style="padding: 10px">
            <span>点击添加新酒店</span>
            <div class="bottom">
                <time class="type">点击添加新酒店</time>
            </div>
        </div>
    </el-card>

    <el-dialog v-model="dialog" :title="this.hotelCategory === 'starHotel' ? '添加星级酒店' : '添加非星级酒店'">
        <el-form :model="form">
            <el-form-item label="酒店名字" :label-width="formLabelWidth">
                <el-input v-model="hotelName" autocomplete="off" />
            </el-form-item>
            <el-form-item label="酒店类型" :label-width="formLabelWidth">
                <el-select v-model="hotelType" placeholder="请选择酒店类型">
                    <template v-if="hotelCategory === 'starHotel'">
                        <el-option label="三星级" value="三星级" />
                        <el-option label="四星级" value="四星级" />
                        <el-option label="五星级" value="五星级" />
                    </template>
                    <template v-else>
                        <el-option label="青年旅舍" value="青年旅舍" />
                        <el-option label="民宿" value="民宿" />
                    </template>
                </el-select>
            </el-form-item>
            <el-form-item>
                <el-form-item label="上传酒店图片" :label-width="formLabelWidth">
                    <uploadImage ref="upload" :limits="1" />
                </el-form-item>
            </el-form-item>
        </el-form>
        <template #footer>
            <span>
                <el-text type="warning">{{ msg }}</el-text>
                <el-button @click="dialog = false">取消</el-button>
                <el-button type="primary" @click="onSubmit()">
                    确认
                </el-button>
            </span>
        </template>
    </el-dialog>
</template>

<style scoped>
.card {
    position: relative;
    width: 220px;
    height: 300px;
    padding: 0px;
}

.type {
    font-size: 12px;
    color: #999;
}

.bottom {
    margin-top: 13px;
    line-height: 12px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

/* .button {
    padding: 0;
    min-height: auto;
} */

.image {
    width: 100%;
    display: block;
}
</style>

<script>
import uploadImage from '../../../components/images/uploadImage.vue'
import { toRaw } from '@vue/reactivity'
import { imgPostRequest, postRequestWithRaw } from '../../../api/axiosAPI'
import axios from 'axios'
import { uploadImageToNet } from '../../../api/imageApi'

export default {
    props: {
        hotelCategory: String,
    },

    data() {
        return {
            dialog: false,
            hotelName: null,
            hotelType: null,
            msg: null,
            isValid: false,
        }
    },

    methods: {
        onSubmit() {
            let fileList = this.$refs.upload.fileList;
            if (this.hotelName === null || this.hotelName === '' || this.hotelType === null || this.hotelType === '') {
                this.msg = '请填写所有信息!';
                this.isValid = false;
                return;
            } else if (JSON.stringify(fileList) === '[]') {
                this.msg = '请上传酒店图片!';
                this.isValid = false;
            } else {
                let temp = this.$refs.upload.getFileExposed();
                let imgPaths = '';
                let formdataImg = new FormData();
                formdataImg.append('file', temp[0].raw);
                uploadImageToNet(formdataImg)
                    .then((response) => {
                        if (response.status === 200) {
                            return response.data;
                        }
                    })
                    .then((data) => {
                        imgPaths = data.rows[0].url;
                        console.log(imgPaths);
                    })
                    .then(() => {
                        postRequestWithRaw('http://localhost:8022/hotel/add', {
                            name: this.hotelName,
                            type: this.hotelType,
                            imgPath: imgPaths
                        }).then((response) => {
                            if (response.status === 200 && response.data.msg === 'SUCCESS') {
                                alert('添加成功!');
                                this.dialog = false;
                                if (this.hotelCategory === 'starHotel') {
                                    this.$parent.$parent.$parent.getAllStarHotels();
                                } else {
                                    this.$parent.$parent.$parent.getAllNonStarHotels();
                                }

                            } else {
                                alert('添加失败，请稍后再试!');
                            }
                        })
                    })
            }
        }
    }
}
</script>